<template>
	<view class="modify-page">
		<c-layout>
			<c-navigation-bar slot="head" :title="$t('storeManagement.comment')"></c-navigation-bar>
			<view class="tabs">
				<view class="tabs_aside" :class="active === 0 ? 'active' : ''" @click="handleActive0">{{$t('product.goodReputation')}}</view>
				<view class="tabs_aside" :class="active === 1 ? 'active' : ''" @click="handleActive1">{{$t('product.negativeComment')}}</view>
			</view>
			<!-- 列表 -->
			<scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="onreachBottom" v-if="active == 0">
				<view class="networlk">
					<uni-list v-for="item in goodLists" :key="item.id">
						<uni-list :border="false">
							<!-- 显示圆形头像 -->
							<uni-list-chat :avatar-circle="true" :title="item.userName" :avatar="$u.file.getMedieUrl(item.userAvatar)"
								:note="item.creatTime">
								<view class="chat-custom-right-one">
									<!-- <text class="chat-custom-text">{{ item.star }}</text> -->
									<!-- 需要使用 uni-icons 请自行引入 -->
									<!-- <uni-icons type="star-filled" color="#F26163" size="18"></uni-icons> -->
									<image src="../../../static/images/notGood.png" mode="heightFix"></image>
								</view>
							</uni-list-chat>
							<view class="content-box">
								<view class="">
									{{ item.content }}
								</view>
							</view>
							<view class="images-box" v-if="item.photos.length>0">
								<view class="" v-for="(it, ind) in item.photos" :key="ind">
									<image :src="$u.file.getMedieUrl(it)" mode="" @click="getImgIndex(item.photos, ind)"></image>
								</view>
							</view>
						</uni-list>
					</uni-list>
					<view ref="loadMoreView"></view>
				</view>
			</scroll-view>

			<scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="onreachBottom" v-if="active == 1">
				<view class="networlk">
					<uni-list v-for="item in badLists" :key="item.id">
						<uni-list :border="false">
							<!-- 显示圆形头像 -->
							<uni-list-chat :avatar-circle="true" :title="item.userName" :avatar="$u.file.getMedieUrl(item.userAvatar)"
								:note="item.creatTime">
								<view class="chat-custom-right">
									<image src="../../../static/images/notGood.png" mode="heightFix"></image>
								</view>
							</uni-list-chat>
							<view class="content-box">
								<view class="">
									{{ item.content }}
								</view>
							</view>
							<view class="images-box" v-if="item.photos.length>0">
								<view class="" v-for="(it, ind) in item.photos" :key="ind">
									<image :src="$u.file.getMedieUrl(it)" mode="" @click="getImgIndex(item.photos, ind)"></image>
								</view>
							</view>
						</uni-list>
					</uni-list>
					<view ref="loadMoreView"></view>
				</view>
			</scroll-view>
		</c-layout>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 1,
				photos: ['../../../static/images/close.png', '../../../static/images/close.png',
					'../../../static/images/close.png'
				],
				active: 0,
				goodLists: [
			
				],
				badLists: [

				]
			};
		},
		computed: {
			queryParams() {
				return {
					pageNum: this.current,
					size: 10,
					offsetBottom: 10,

					contentHeight: 0,
					safeArea: true,
					auto: false,
					emptyText: this.$t('system.NoRecord'),
					noMoreText: this.$t('system.NoFurtherDataAvailable'),
					showPullDown: false,
					loadDisabled: false
				};
			}
		},
		onLoad() {
			this.getGoodComLists();
		},
		methods: {
			handleActive0() {
				this.badLists = [];
				this.current = 1;
				this.active = 0;
				this.getGoodComLists();
			},
			handleActive1() {
				this.goodLists = [];
				this.current = 1;
				this.active = 1;
				this.getBadComLists();
			},
			getImgIndex(photos, index) {
				if (photos.length) {
					let imgs = photos.map((item) => {
						return this.$u.file.getMedieUrl(item);
					});
					//调用预览图片的方法
					uni.previewImage({
						urls: imgs,
						// http://192.168.1.4:8080/api/app/common/file?fileName=

						current: index //点击图片传过来的下标
					});
				}
			},
			//底部加载更多
			onreachBottom() {

				const loadMoreView = this.$refs.loadMoreView.$el;
				if (this.active == 0) {
					this.$emit('loading', this.getGoodComLists());
				} else {
					this.$emit('loading', this.getBadComLists());
				}
			},
			//加载更多
			loadMore() {
				this.current++;
				if (this.active == 0) {
					this.getGoodComLists();
				} else {
					this.getBadComLists();
				}
			},
			refresh(paging) {
				this.current = 1;
				if (this.active == 0) {
					this.getGoodComLists();
				} else {
					this.getBadComLists();
				}
				// this.mainData.goods.data={pageNum:paging.page,pageSize:paging.size}
				// this.getGoodsCollectAjax(false,false,'refreshSuccess')
			},
			//获取评论列表
			//好评
			getGoodComLists() {

				let data = {
					size: 5,
					current: this.current,
					rating: 1
				};
				this.$u.post('/app/shopOrderComment/shopPage', data).then((res) => {
					if (res.code == 200) {
						const nextDataList = res.data.records; // 假设接口返回数据格式为 { data: [...] }
						if (nextDataList.length > 0) {
							this.goodLists = this.goodLists.concat(nextDataList);
							this.handleList(this.goodLists);
							this.current++;
						} else {
							uni.showToast({
								title: 'no more',
								icon: 'none'
							});
						}
					} else {
						uni.showToast({
							title: 'err',
							icon: 'none'
						});
					}
				});
			},
			//差评
			getBadComLists() {

				let data = {
					size: 5,
					current: this.current,
					rating: 2
				};
				this.$u.post('/app/shopOrderComment/shopPage', data).then((res) => {
					if (res.code == 200) {
						const nextDataList = res.data.records; // 假设接口返回数据格式为 { data: [...] }
						if (nextDataList.length > 0) {
							this.badLists = this.badLists.concat(nextDataList);
							this.handleList(this.badLists);
							this.current++;
						} else {
							uni.showToast({
								title: 'no more',
								icon: 'none'
							});
						}
					} else {
						uni.showToast({
							title: 'err',
							icon: 'none'
						});
					}
				});
			},
			handleList(lists) {
				lists.forEach((item) => {
					this.$set(item, 'creatTime', this.timestampToDateString(Number(item.createdTime)));
					this.$set(item, 'photos',item.images?item.images.split(','):[]);
				});
			},
			timestampToDateString(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const dateString = `${month} ${day} ${year}`;
				return dateString;
			}
		}
	};
</script>

<style lang="scss" scoped>
	/deep/.uni-scroll-view,
	.uni-scroll-view-content {
		height: 98%;
		overflow: auto;

	}

	/deep/ .uni-list-chat__container {
		padding: 30rpx 48rpx 0 48rpx;
	}

	/deep/.uni-icons {
		font-size: 18rpx !important;
		margin: 4rpx;
	}

	/deep/ .uni-list--border-top {
		position: absolute;
		bottom: 0;
		right: 0;
		left: 150rpx;
		height: 1px;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: #e5e5e5;
		width: 555rpx;
	}

	/deep/.uni-list--border-bottom {
		display: none;
	}

	/deep/ .uni-list-chat__header {
		width: 79rpx;
		height: 79rpx;
	}

	/deep/ .uni-list-chat__content-title {
		font-size: 34rpx;
		color: #0a1f44;
	}

	/deep/ .uni-list-chat__content-note {
		font-size: 20rpx;
		color: #91909a;
	}

	/deep/.uni-list-chat {
		font-size: 30rpx;
		color: #1b1d29;
	}

	/deep/.uni-list-chat__content-extra {
		justify-content: start;
	}

	/deep/.uni-list-chat__content-main {
		padding-left: 30rpx;
		margin-bottom: 10rpx;
	}

	/deep/.content-box {
		width: 70%;
		font-size: 22rpx;

		margin: 0 158rpx 24rpx 158rpx;

		position: relative;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	/deep/.networlk {
		.uni-list:first-child {
			.uni-list--border-top:first-child {
				display: none;
			}
		}
	}

	.time-box {
		font-size: 26rpx;
		color: #2934d0;
		padding: 18rpx 0 18rpx 50rpx;
	}

	.modify-page {
		height: 100vh;

		.tabs {
			height: 68rpx;
			background: rgba(0, 0, 0, 0.0287);
			border-radius: 34rpx 34rpx 34rpx 34rpx;
			opacity: 1;
			width: 539rpx;
			display: flex;
			align-items: center;
			margin: 58rpx auto;
			padding: 0 8rpx;

			.tabs_aside {
				width: 50%;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular-Regular, PingFangSC-Regular;
				font-weight: 400;
				color: #a5a5a5;
				transition: transform 0.4s;
			}

			.active {
				background: #ffffff;
				box-shadow: 0rpx 10rpx 40rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				height: 56rpx;
				line-height: 56rpx;
				color: #3b2be4;
			}
		}
	}

	.chat-custom-right {
		width: 50rpx;
		height: 35rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.chat-custom-right-one {
		width: 50rpx;
		height: 35rpx;

		image {
			width: 100%;
			height: 100%;
			-moz-transform: scaleY(-1);
			-webkit-transform: scaleY(-1);
			-o-transform: scaleY(-1);
			transform: scaleY(-1);
		}
	}

	.images-box {
		display: flex;
		flex-wrap: wrap;

		width: 100%;
		padding: 20rpx 40rpx;

		view {
			margin-left: 40rpx;
			width: 160rpx;
			height: 160rpx;
			border-radius: 15rpx;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>